<template>
  <div class="main-scroll">
    <cheader :title="title"></cheader>
    <el-card class="box-card">
      <div style="padding: 10px">
        <el-form
          ref="filterForm"
          :inline="true"
          :model="filterForm"
          class="demo-form-inline"
          label-width="70px"
        >
          <el-form-item label="员工姓名">
            <el-input
              v-model="filterForm.emplName"
              placeholder="员工姓名"
            ></el-input>
          </el-form-item>

          <el-form-item label="所属部门">
            <el-input
              v-model="filterForm.dept"
              placeholder="所属部门"
            ></el-input>
          </el-form-item>

          <el-form-item label="二级部门">
            <el-input
              v-model="filterForm.secondDept"
              placeholder="二级部门"
            ></el-input>
          </el-form-item>

          <el-form-item label="所属班组">
            <el-input
              v-model="filterForm.team"
              placeholder="所属班组"
            ></el-input>
          </el-form-item>

          <el-form-item label="培训级别">
            <el-select
              v-model="filterForm.trainingLevel"
              placeholder="请选择"
              @change="changeTrainingLeve"
            >
              <el-option
                v-for="item in trainingLevelList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="培训类型">
            <el-select
              v-model="filterForm.trainingType"
              placeholder="请选择"
              @change="changeTrainingType"
            >
              <el-option
                v-for="item in trainingTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="参与角色">
            <el-select
              v-model="filterForm.participatingRole"
              placeholder="请选择"
              @change="changeParticipatingRole"
            >
              <el-option
                v-for="item in participatingRoleList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="培训时间">
            <el-date-picker
              v-model="filterForm.trainingTime"
              type="daterange"
              range-separator="至"
              start-placeholder="起始日期"
              end-placeholder="截止日期"
              value-format="yyyy-MM-dd"
              @change="changeDate"
            >
            </el-date-picker>
          </el-form-item>
          <el-row>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="query"
                >查询</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="reset">清除查询条件</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <!-- </div> -->
    </el-card>
    <el-card>
      <el-button
        v-auth="'C02002'"
        style="
          float: right;
          margin-right: 20px;
          margin-bottom: 20px;
          margin-top: 20px;
        "
        icon="el-icon-download"
        @click="exportExcel"
        >导出</el-button
      >
      <el-button
      v-auth="'C02001'"
        type="primary"
        style="
          float: right;
          margin-right: 20px;
          margin-bottom: 20px;
          margin-top: 20px;
        "
        @click="dialogVisible = true"
        icon="el-icon-plus"
        >添加</el-button
      >
      <div style="margin: 20px">
        <el-table
          :data="trainingList"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#F6F7FB' }"
        >
          <el-table-column
            type="index"
            :index="indexAdd"
            label="序号"
            width="50"
          >
          </el-table-column>
          <el-table-column label="部门">
            <template slot-scope="scope">
              <p>{{ scope.row.dept }}</p>
            </template>
          </el-table-column>
          <el-table-column label="二级部门">
            <template slot-scope="scope">
              <p>{{ scope.row.secondDept }}</p>
            </template>
          </el-table-column>
          <el-table-column label="班组">
            <template slot-scope="scope">
              <p>{{ scope.row.team }}</p>
            </template>
          </el-table-column>
          <el-table-column label="姓名">
            <template slot-scope="scope">
              <p>{{ scope.row.emplName }}</p>
            </template>
          </el-table-column>
          <el-table-column label="培训时间">
            <template slot-scope="scope">
              <p>{{ scope.row.trainingTime | formatDate('yyyy-MM-dd') }}</p>
            </template>
          </el-table-column>
          <el-table-column label="培训级别">
            <template slot-scope="{ row }">
              <p v-if="row.trainingLevel == 1">班组级</p>
              <p v-if="row.trainingLevel == 2">车间级</p>
              <p v-if="row.trainingLevel == 3">公司级</p>
            </template>
          </el-table-column>
          <el-table-column label="培训类型">
            <template slot-scope="{ row }">
              <p v-if="row.trainingType == 1">安全类</p>
              <p v-if="row.trainingType == 2">设备类</p>
              <p v-if="row.trainingType == 3">工艺类</p>
              <p v-if="row.trainingType == 4">综合类</p>
            </template>
          </el-table-column>
          <el-table-column label="主要培训内容" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <p>{{ scope.row.content }}</p>
            </template>
          </el-table-column>
          <el-table-column label="参与角色">
            <template slot-scope="{ row }">
              <p v-if="row.participatingRole == 1">培训讲师</p>
              <p v-if="row.participatingRole == 2">参训人员</p>
            </template>
          </el-table-column>
          <el-table-column label="得奖情况">
            <template slot-scope="{ row }">
              <p v-if="row.ranking == 1">公司第一名</p>
              <p v-if="row.ranking == 2">公司第二名</p>
              <p v-if="row.ranking == 3">公司第三名</p>
              <p v-if="row.ranking == 4">通报表扬</p>
            </template>
          </el-table-column>
          <el-table-column label="得分情况">
            <template slot-scope="scope">
              <p>{{ scope.row.score }}</p>
            </template>
          </el-table-column>
          <el-table-column label="备注" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <p>{{ scope.row.remark }}</p>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        v-if="isUpdate"
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="pageNo"
        :total="total"
        :hide-on-single-page="total < 10"
        @current-change="currentChange"
        class="pagination"
      >
      </el-pagination>
      <!-- </div>
      </div> -->
    </el-card>
    <el-dialog title="填报须知" :visible.sync="dialogVisible" width="50%">
      <div class="notice">
        <p>一、填报要求：</p>
        <p>1、培训级别为公司、车间、班组级</p>
        <p>
          2、培训类型分为安全类、设备类、工艺类、综合类，培训形式分为现场培训、班组微小课和集中培训
        </p>
        <p>3、内容简介、准确表达培训主题</p>
        <p>二、积分标准</p>
        <p>1、参加一次培训记0.5分。</p>
        <p>2、微小课制作者2分，当一次培训讲师记2分。</p>
        <p>
          3、参加公司级考试，取得名次者第一名记5分、第二名记3分、第三名记2分、被通报表扬者记1分。
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="open2"> 确 定 </el-button>
      </span>
    </el-dialog>
    <el-dialog title="添加" :visible.sync="dialogVisible2" width="50%">
      <el-form
        ref="createForm"
        :model="createForm"
        :rules="rules"
        label-width="130px"
      >
        <el-form-item label="培训时间:" prop="trainingTime">
          <el-date-picker
            v-model="createForm.trainingTime"
            type="date"
            placeholder="培训时间"
            value-format="yyyy-MM-dd"
            @change="changeDate2"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="培训级别:" prop="trainingLevel">
          <el-select v-model="createForm.trainingLevel" placeholder="请选择">
            <el-option
              v-for="item in trainingLevelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="培训类型:" prop="trainingType">
          <el-select v-model="createForm.trainingType" placeholder="请选择">
            <el-option
              v-for="item in trainingTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="主要培训内容:" prop="content">
          <el-input
            v-model="createForm.content"
            type="textarea"
            :rows="4"
            maxlength="200"
            show-word-limit
            placeholder="请填写"
          ></el-input>
        </el-form-item>
        <el-form-item label="参与角色:" prop="participatingRole">
          <el-select
            v-model="createForm.participatingRole"
            placeholder="请选择"
          >
            <el-option
              v-for="item in participatingRoleList2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="得奖情况:">
          <el-select v-model="createForm.ranking" placeholder="请选择">
            <el-option
              v-for="item in rankingList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注:">
          <el-input
            v-model="createForm.remark"
            placeholder="请填写"
            type="textarea"
            :rows="4"
            maxlength="50"
            show-word-limit
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reset1">取 消</el-button>
        <el-button type="primary" @click="addTrainingList">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import cheader from '@/components/header.vue'
import { trainingList, addTraining } from '@/api/personal-files'
import { exportMethod } from '@/utils/utils'
import { exportExcel } from '@/api'
import fileDownload from 'js-file-download'
export default {
  components: {
    cheader
  },
  data() {
    return {
      title: '参加培训情况',
      form: '',
      isUpdate: true,
      filterForm: {
        emplName: '',
        dept: '',
        secondDept: '',
        team: '',
        trainingLevel: '',
        trainingType: '',
        trainingTime: '',
        participatingRole: ''
      },
      createForm: {
        trainingTime: '',
        trainingLevel: '',
        trainingType: '',
        content: '',
        participatingRole: '',
        ranking: '',
        remark: ''
      },
      participatingRoleList: [
        {
          value: 1,
          label: '培训讲师'
        },
        {
          value: 2,
          label: '参训人员'
        }
      ],
      participatingRoleList2: [
        {
          value: 1,
          label: '培训讲师'
        },
        {
          value: 2,
          label: '参训人员'
        }
      ],
      trainingLevelList: [
        {
          value: 1,
          label: '班组级'
        },
        {
          value: 2,
          label: '车间级'
        },
        {
          value: 3,
          label: '公司级'
        }
      ],
      trainingTypeList: [
        {
          value: 1,
          label: '安全类'
        },
        {
          value: 2,
          label: '设备类'
        },
        {
          value: 3,
          label: '工艺类'
        },
        {
          value: 4,
          label: '综合类'
        }
      ],
      rankingList: [
        {
          value: 1,
          label: '公司第一名'
        },
        {
          value: 2,
          label: '公司第二名'
        },
        {
          value: 3,
          label: '公司第三名'
        },
        {
          value: 4,
          label: '通报表扬'
        }
      ],
      rules: {
        trainingTime: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        trainingLevel: [
          { required: true, message: '请选择培训级别', trigger: 'change' }
        ],
        trainingType: [
          { required: true, message: '请选择培训类型', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请填写培训内容', trigger: 'blur' }
        ],
        participatingRole: [
          { required: true, message: '请选择参与角色', trigger: 'change' }
        ],
        remark: [{ required: true, message: '请填写备注', trigger: 'blur' }]
      },
      pageNo: 1, // 分页页码
      pageSize: 10, // 每页条数
      total: 0,
      trainingList: [],
      dialogVisible: false,
      dialogVisible2: false
    }
  },
  created() {
    this.getTrainingList()
  },
  methods: {
    exportExcel() {
      const data = {
        dept: this.filterForm.dept,
        emplName: this.filterForm.emplName,
        pageNo: this.pageNo,
        pageSize: 5000,
        participatingRole: this.filterForm.participatingRole,
        secondDept: this.filterForm.secondDept,
        team: this.filterForm.team,
        trainingEndTime: this.filterForm.trainingTime[1],
        trainingLevel: this.filterForm.trainingLevel,
        trainingStartTime: this.filterForm.trainingTime[0],
        trainingType: this.filterForm.trainingType
      }
      exportMethod('training', data, '培训记录')
    },
    open2() {
      this.dialogVisible = false
      this.dialogVisible2 = true
      this.createForm = {
        trainingTime: '',
        trainingLevel: '',
        trainingType: '',
        content: '',
        participatingRole: '',
        ranking: '',
        remark: ''
      }
    },
    changeDate2(date) {
      this.createForm.trainingTime = date
    },
    addTrainingList() {
      this.$refs.createForm.validate(async (valid) => {
        if (valid) {
          const res = await addTraining(this.createForm)
          if (res.code == 200) {
            this.$message({
              message: '创建成功',
              type: 'success'
            })
            this.dialogVisible2 = false
            this.getTrainingList()
            this.$refs.createForm.resetFields()
          }
          // console.log('res', res)
        } else {
          return false
        }
      })
    },

    changeTrainingLeve(val) {
      this.filterForm.trainingLeve = val
    },
    changeTrainingType(val) {
      this.filterForm.trainingType = val
    },
    changeParticipatingRole(val) {
      this.filterForm.participatingRole = val
    },
    async getTrainingList() {
      const res = await trainingList({
        dept: this.filterForm.dept,
        emplName: this.filterForm.emplName,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        participatingRole: this.filterForm.participatingRole,
        secondDept: this.filterForm.secondDept,
        team: this.filterForm.team,
        trainingEndTime: this.filterForm.trainingTime[1],
        trainingLevel: this.filterForm.trainingLevel,
        trainingStartTime: this.filterForm.trainingTime[0],
        trainingType: this.filterForm.trainingType
      })
      if (res.code == 200) {
        this.isUpdate = true
        // console.log('res', res)
        this.trainingList = res.data.list
        this.total = res.data.total
      }
    },
    changeDate(date) {
      this.filterForm.trainingTime = date
    },
    query() {
      this.pageNo = 1
      this.isUpdate = false
      this.getTrainingList()
    },
    currentChange(pageNo) {
      this.pageNo = pageNo
      this.getTrainingList()
    },
    reset() {
      this.filterForm.emplName = ''
      this.filterForm.dept = ''
      this.filterForm.secondDept = ''
      this.filterForm.team = ''
      this.filterForm.trainingLevel = ''
      this.filterForm.trainingType = ''
      this.filterForm.trainingTime = ''
      this.filterForm.participatingRole = ''
    },
    reset1() {
      this.dialogVisible2 = false
      this.createForm = {
        trainingTime: '',
        trainingLevel: '',
        trainingType: '',
        content: '',
        participatingRole: '',
        ranking: '',
        remark: ''
      }
      this.$refs.createForm.resetFields()
    },
    // 序号-页面切换递增
    indexAdd(index) {
      return index + 1 + (this.pageNo - 1) * this.pageSize
    },
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style lang="scss" scoped>
.c-main-make {
  margin-left: 35px;
  height: 300px;
  background: #fff;
  margin-right: 35px;
  margin-bottom: 35px;
  position: relative;
  overflow: hidden;
  border: 1px #dcdee0 solid;
}
.main-seting {
  width: 100%;
}
.c-main-show {
  margin-left: 35px;
  min-height: 700px;
  background: #fff;
  margin-right: 35px;
  margin-bottom: 35px;
  position: relative;
  // overflow: hidden;
  border: 1px #dcdee0 solid;
}
.title-text {
  width: 100%;
  height: 50px;
  border-bottom: 1px #dcdee0 solid;
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', 微软雅黑, sans-serif;
  font-weight: 700;
  color: #666666;
  line-height: 50px;
  padding-left: 25px;
}
.main-scroll {
  height: 1000px;
  // overflow-y: scroll;
}
.pagination {
  display: flex;
  justify-content: end;
}
.box-card {
  margin-bottom: 20px;
}
.el-input {
  width: 250px;
}
.el-select {
  width: 250px;
}
</style>
